<template>
  <div class="head">
    <div class="head-top">
      <van-icon
        name="arrow-left"
        size="20"
        color="#323232"
        class="arrow-left"
        @click="handlemy"
      />
      <div class="tj">个人资料</div>
    </div>
    <div class="section">
      <div class="avthor">
        <div class="avthor_thor">
          <span>头像</span>
        </div>
        <div class="my_upload">
          <div>
            <van-uploader :after-read="afterRead" class="aa" />
            <van-icon name="arrow" />
            <div class="avthors">
              <img  :src="imgsrc"/>
            </div>
          </div>
        </div>
      </div>
      <div class="vip">
        <div class="avthor_thor">
          <span>会员名</span>
        </div>
        <div class="van-cell__value">
          <span>CD2224212725</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="vip">
        <div class="avthor_thor">
          <span>昵称</span>
        </div>
        <div class="van-cell__value">
          <span>CD2224212725</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="vip">
        <div class="avthor_thor">
          <span>性别</span>
        </div>
        <div class="van-cell__value" @click="hadletost">
          <span>{{ actions[0].name }}</span>
          <van-icon name="arrow" />
        </div>
        <van-action-sheet
          v-model="show"
          :actions="actions"
          cancel-text="取消"
          close-on-click-action
          @cancel="onCancel"
        />
      </div>
    </div>
    <div class="_30zkBngQ6xjU">
      <button
        type="button"
        class="m-button m-button--danger m-button--normal m-button--block"
        @click="handlelogout(null)"
      >
        退出登录
      </button>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { imgUpload ,userUpdate} from "../api/dl-api";
import {mapState,mapMutations} from "vuex"
export default {
  data() {
    return {
      fileList: [
        { url: 'https://img01.yzcdn.cn/vant/leaf.jpg'},
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      ],
      imgsrc:'',
      show: false,
      actions: [
        { name: "女", color: "#ee0a24" },
        { name: "男", color: "#ee0a24" },
        { name: "保密" },
      ],
    };
  },
  computed: {
    ...mapState({
      userInfo:state=>state.ddk.userInfo
    })
  },
  methods: {
    handlemy() {
      this.$router.push("/my");
    },
   async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file);
      let formData = new FormData();
      formData.append("avatar", file.file); //将文件资源整理为表单对象格式
      console.log(formData)
      //方法1
      // imgUpload(formData).then(res=>{
      //   console.log(res)
      //   let {url}=res.data.data
      //   this.imgsrc=`http://localhost:3003${url}`
      //   userUpdate(
      //     this.userInfo._id,
      //     {
      //       avator:url
      //     }
      //   )
      // })
      //方法2
     let imsdata= await imgUpload(formData)//上传头像
     let {url}=imsdata.data.data
        this.imgsrc=`http://localhost:3003${url}`
       let res=await userUpdate(this.userInfo._id,{avator:url})//数据库更新
        this.$store.commit('ddk/initUserInfoMut',{//更新本地
          ...this.userInfo,
          avator:url
        })
     
    },
    hadletost() {
      this.show = true;
    },
    onCancel() {
      Toast("取消");
    },
    ...mapMutations({
      handlelogout:'ddk/initUserInfoMut'
    }),
    
    
  },
  created() {
    if(this.userInfo&&this.userInfo.avator){//初始化头像
      this.imgsrc='http://localhost:3003'+this.userInfo.avator
    }
  },
};
</script>

<style lang="less" scoped>
.head {
  background-color: #f4f4f4;
  height: 100vh;
  line-height: 30px;
  .head-top {
    display: flex;
    height: 30px;
    padding-top: 10px;
    border-bottom: 1px solid #ebedf0;
    background-color: #ffff;
  }
  .tj {
    font-size: 18px;
    margin: 0 auto;
    line-height: 30px;
  }
}
.aa {
  opacity: 1;
  border-radius: 50%;
}
/deep/.van-uploader__upload {
  width: 40px;
  height: 40px;
  position: relative;
  opacity: 0;
  z-index: 20;
}
.avthor {
  display: flex;
  justify-content: space-between;
  margin: 0 20px;
  align-items: center;
}
.vip {
  display: flex;
  justify-content: space-between;
  margin: 15px 20px;
}
.section {
  background-color: #ffff;
}
.avthor_thor > span {
  color: #323233;
  font-size: 14px;
}

.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}
.avthors > img {
  position: absolute;
  top: 42px;
  right: 45px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  opacity: 1;
}
._30zkBngQ6xjU {
  padding: 0.96rem 0.32rem;
}
.m-button--block {
  display: block;
  width: 100%;
}

.m-button--normal {
  padding: 0 0.4rem;
  font-size: 0.37333rem;
}
.m-button--danger {
  color: #fff;
  background-color: #fb2020;
  border: 1px solid #fb2020;
}
.m-button {
  height: 45px;
  border-radius: 5px;
  font-size: 16px;
}
</style>